<template>
	<view class="bigView">
		<view class="topView">
			<view class="item">
				<view class="title">手机号</view>
				<view class="inputView">
					<u--input placeholder="请输入手机号" border="surround" v-model="form.phone"></u--input>
				</view>
			</view>
			<view class="item" style="margin-top: 12px;">
				<view class="title">验证码</view>
				<view class="inputView2">
					<u--input placeholder="请输入短信验证码" border="surround" v-model="code"></u--input>
					<image v-if="codeSrc" :src="codeSrc" @click="handleGetDxCode" style="width: 100rpx;height: 60rpx;"></image>
				</view>
			</view>
			<view class="item" style="margin-top: 12px;">
				<view class="title">短信验证码</view>
				<view class="inputView2">
					<u--input placeholder="请输入验证码" border="surround" v-model="form.mobileCode"></u--input>
					<view style="color: #247BFD;font-size: 12px;" @click="getMobileCodeHandle">{{ buttonText }}</view>
				</view>
			</view>
			<view class="item" style="margin-top: 12px;">
				<view class="title">新密码</view>
				<view class="inputView">
					<u--input placeholder="请设置密码" border="surround" v-model="form.pwd" type="password"></u--input>
				</view>
			</view>
			<view class="item" style="margin-top: 12px;">
				<view class="title">确认密码</view>
				<view class="inputView">
					<u--input placeholder="请再次设置密码" border="surround" v-model="form.newPwd" type="password"></u--input>
				</view>
			</view>
		</view>
		<view class="bottomView" :style="[{ height: bottom + 'px' }]">
			<view class="sure" @click="sureHandle">确定</view>
		</view>
	</view>
</template>

<script>
import {
	isJZNull
} from '../../utils/auth'
import mine from '@/api/mine.js'
import {
	apiGetCode
} from '@/api/login.js'
import {
	encrypt
} from '@/utils/rsaEncrypt'
export default {
	data() {
		return {
			bottom: 0,
			status: 0,
			form: {
				pwd: '',
				mobileCode: '',
				phone: '',
				newPwd: ''
			},
			isCounting: false, // 是否正在倒计时
			countdown: 60, // 倒计时总秒数
			timer: null, // 定时器ID
			uuid: undefined,
			code: '',
			codeSrc: null
		}
	},
	mounted() {
		uni.getSystemInfo({
			success: (e) => {
				// this.StatusBar = e.statusBarHeight;
				let custom = wx.getMenuButtonBoundingClientRect();
				this.bottom = custom.bottom;
				// this.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
				// this.TopHeight = this.CustomBar+100;//this.StatusBar+this.CustomBar;
			}
		})
		if (this.status != 1) {
			this.initUserInfo()
		}

	},
	onLoad(options) {
		if (options.status) {
			this.status = options.status;
		}
		if (this.status == 1) {
			uni.setNavigationBarTitle({
				title: "忘记密码"
			})
		}
		this.handleGetDxCode()
	},
	onUnload() {
		// 页面销毁时清除定时器，防止内存泄漏
		if (this.timer) {
			clearInterval(this.timer);
			this.timer = null;
		}
		console.log("销毁")
	},
	computed: {
		// 动态计算按钮文字
		buttonText() {
			return this.isCounting ? `${this.countdown}秒后重发` : '发送验证码';
		}
	},
	methods: {
		async handleGetDxCode() {
			const res = await apiGetCode({
				phone: '13333333333'
			})
			this.uuid = res.uuid
			this.codeSrc = res.img
		},
		handleGetCode() {
			if (!this.code) {
				return uni.showToast({
					title: '请输入验证码',
					icon: 'error'
				})
			}
			this.getMobileCodeRequest();
		},
		handleClose() {
			this.code = ''
			this.codeSrc = null
		},
		async getMobileCodeHandle() {
			if (this.isCounting) return;
			if (isJZNull(this.form.phone)) {
				uni.showToast({
					title: "手机号不能为空",
					icon: 'none'
				})
				return;
			}
			if (!/^1[0-9]{10}/.test(this.form.phone)) {
				return uni.showToast({
					title: "请输入正确格式！",
					icon: 'none'
				})
			}
			if (!this.code) {
				return uni.showToast({
					title: "请输入短信验证码！",
					icon: 'none'
				})
			}
			this.getMobileCodeRequest()
		},
		getMobileCodeRequest() {
			uni.showLoading({
				title: "正在获取..."
			})
			mine.getMobileCode({
				phone: this.form.phone,
				uuid: this.uuid,
				templateCode: 1925716,
				yzmCode: this.code
			}).then(res => {
				this.isCounting = true;
				this.countdown = 60;
				uni.showToast({
					title: "短信发送成功",
					icon: 'success',
					mask: true
				})
				// 开始倒计时
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						this.resetCountdown();
					}
				}, 1000);
			}).catch(err => {
				uni.hideLoading()
				this.resetCountdown()
			}).finally(() => {
				uni.hideLoading()
			})
		},
		resetCountdown() {
			clearInterval(this.timer);
			this.timer = null;
			this.isCounting = false;
			this.countdown = 60;
		},
		sureHandle() {
			if (isJZNull(this.form.phone)) {
				uni.showToast({
					title: "手机号不能为空"
				})
				return;
			}
			if (isJZNull(this.form.mobileCode)) {
				uni.showToast({
					title: "验证码不能为空"
				})
				return;
			}
			if (isJZNull(this.form.pwd)) {
				uni.showToast({
					title: "密码不能为空"
				})
				return;
			}
			if (isJZNull(this.form.newPwd)) {
				uni.showToast({
					title: "确认密码不能为空"
				})
				return;
			}
			if (this.form.pwd != this.form.newPwd) {
				uni.showToast({
					title: "两次密码不一致"
				})
				return;
			}
			let password2 = encrypt(this.form.pwd)
			uni.showLoading({
				title: "修改中..."
			})
			mine.changePassword({
				phone: this.form.phone,
				password: password2,
				mobileCode: this.form.mobileCode
			}).then(res => {
				uni.hideLoading();
				uni.showToast({
					icon: 'none',
					title: "修改成功"
				})
				uni.navigateBack()
			})

		},
			initUserInfo() {
				const userInfo = uni.getStorageSync("userInfo")
				if (userInfo) {
					this.userInfo = JSON.parse(userInfo);
					this.form.phone = this.userInfo.phone;
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.bigView {
	width: 100vw;
	height: 100vh;
	background-color: #F7F7F7;
	display: flex;
	flex-direction: column;
	// align-items: center;
	// justify-content: center;
}

.item {
	width: 100vw;
	display: flex;
	flex-direction: column;
	background-color: white;

	.title {
		margin-left: 16px;
		margin-top: 16px;
	}

	.inputView {
		width: calc(100vw - 32px);
		margin-left: 10px;
		margin-top: 12px;
		margin-bottom: 12px;
		// background-color: red;
	}

	.inputView2 {
		width: calc(100vw - 32px);
		margin-left: 10px;
		margin-top: 12px;
		margin-bottom: 12px;
		// background-color: red;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
}

.topView {
	margin-top: 8px;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
}

.bottomView {
	height: 150px;
	width: 100vw;
	// background-color: yellow;
	display: flex;
	justify-content: center;

	.sure {
		width: calc(100vw - 32px); //calc(100vw-#{32px});
		height: 48px;
		border-radius: 24px;
		background-color: #247BFD;
		display: flex;align-items: center;
			justify-content: center;
			color: white;
		}
	}
</style>